// 引入当前less
require('../less/courseVideo.less')

// 文档加载完成
document.ready(() => {

    // 获取dom
    let video = document.querySelector('#video')
    let currentNum = document.querySelector('#currentNum')//当前第几个视频
    let totalNum = document.querySelector('#totalNum')  //总视频数
    let titleName = document.querySelector('#titleName')  //当前课程标题
    let iconPre = document.querySelector('#iconPre')  //上一节
    let iconStop = document.querySelector('#iconStop')  //暂停
    let iconNext = document.querySelector('#iconNext')  //下一节
    let progress = document.querySelector('#progress')  //进度条
    let mantle = document.querySelector('#mantle')  //蒙层
    let curImg = document.querySelector('#curImg')  //当前视频所对应的图片
    let curTitle = document.querySelector('#curTitle')  //当前视频所对应的课程名称
    let continueBtn = document.querySelector('#continueBtn')  //继续训练
    let endBtn = document.querySelector('#endBtn')  //结束训练

    let timerId = null
    // 定义数组，保存每个视频播放的时间
    let times = []
    // 从本地存储中取得数据,是个数组
    let videos = JSON.parse(localStorage.getItem('videos'))
    console.log(videos);
    //  获取课程的id
    let cid = window.location.search.split("=")[1]
    console.log(cid);
    // 获取用户的id
    let userId = JSON.parse(localStorage.getItem("user")).userId
    console.log(userId);

    // 视频播放的起始位置
    let index = 0

    // 封装函数，页面加载，获取相应数据，然后播放视频
    function getPlay() {
        video.src = window.$utils.BASE_URL + videos[index].videoUrl
        video.play()
        currentNum.textContent = index + 1 //当前时第几个视频
        totalNum.textContent = videos.length //总视频个数
        titleName.textContent = videos[index].title //当前课程标题
        progressBar() //调用进度条
    }
    // 页面加载，调用函数
    getPlay()

    // 进度条  当前宽度 = 当前时间/总时长 * 总宽度
    //获取设备的宽度
    const screenWidth = window.screen.width
    // 封装进度条函数
    function progressBar() {
        // 先清除计时器
        window.clearInterval(timerId)
        // 开启计时器
        timerId = window.setInterval(function () {
            //获取当前时间 
            let curTime = video.currentTime
            // 把当前播放的时间放到数组中
            times[index] = curTime
            //获取视频的总时间
            let durTime = video.duration
            // 拼接，显示到页面
            progress.style.width = curTime / durTime * screenWidth + "px"
            console.log("-----");
        }, 20)
    }

    // 自动播放
    video.addEventListener('ended', function () {
        index++
        if (index < videos.length) {
            getPlay()
        } else {
            clearInterval(timerId)
        }
    })

    // 点击iconPre，添加上一节的点击事件
    iconPre.addEventListener('click', function () {
        // 索引自减
        index--;
        if (index >= 0) {
            getPlay()
        } else {
            index = 0
        }
    })

    // 点击iconNext，添加下一节的点击事件
    iconNext.addEventListener('click', function () {
        // 索引自增
        index++;
        if (index < videos.length) {
            getPlay()
        } else {
            index = videos.length - 1
        }
    })

    // 点击iconStop,添加点击事件
    iconStop.addEventListener('click', function () {
        // 暂停视频
        video.pause()
        // 停止计时器
        window.clearInterval(timerId)
        // 显示蒙层
        mantle.style.display = 'block'
        // 判断
        if (index < videos.length) {
            //当前视频的图片
            curImg.src = window.$utils.BASE_URL + videos[index].imgUrl
            //当前视频的标题
            curTitle.textContent = videos[index].title
        }
    })

    // 点击continueBtn,添加事件
    continueBtn.addEventListener('click', function () {
        // 关闭蒙层
        mantle.style.display = 'none'
        //继续播放视频
        video.play();
        //进度条继续前进
        progressBar()
    })

    // 点击endBtn,添加事件,保存数据
    endBtn.addEventListener('click', function () {
        // 总时间
        let totalTime = 0
        // 遍历
        times.forEach(function (v) {
            totalTime += v
        })
        // 发送ajax请求
        axios.post(window.$utils.BASE_URL + "/sports/saveTrain",
            {
                id: cid,  //课程id
                userId: userId,  //用户id
                takeTime: totalTime,  //训练时间
                calorie: totalTime * 1.5  //消耗卡路里
            })
            .then((result) => {
                let res = result.data
                console.log(res);
                if (res.status === 0) {
                    // 提示框
                    window.$utils.showToast("icon-hhh", "保存成功")
                    //跳转页面
                    window.setTimeout(() => {
                        window.location.href = "course.html"
                    }, 2000)
                } else {
                    // 提示框
                    window.$utils.showToast("icon-ku", "保存失败")
                }
            })
            .catch((error) => {
                console.log(error);
            })
    })
})